<template lang="pug">
.cp-product-need-popup
  el-dialog.need-pop(
    :title="title",
    :visible="visible",
    @close="closeDialog",
    :close-on-click-modal="!isEdit",
    width="80%")
    el-form.need-pop-form(:model="formData", :inline="true", label-width="64px")
      el-row(:gutter="20")
        el-col(:span="8")
          el-form-item(label="ID")
            el-input(v-model="formData.id", placeholder="自动生成", disabled)
        el-col(:span="16")
          el-form-item(label="标题")
            el-input(v-model="formData.title", placeholder="请输入标题", :disabled="!isEdit")
      el-row(:gutter="20")
        el-col(:span="8")
          el-form-item(label="需求层级")
            el-select(v-model="formData.needLevel", disabled)
              el-option(v-for="item in needLevelSelect", :key="item.value", :label="item.name", :value="item.value")
        el-col(:span="8")
          el-form-item(label="所属模块")
            el-select(v-model="formData.module", :disabled="!isEdit")
              el-option-group( v-for="group in moduleSelect", :key="group.name", :label="group.name")
                el-option(v-for="item in group.options", :key="item.value", :label="item.name", :value="item.value")
        el-col(:span="8")
          el-form-item(label="评审人")
            el-select(v-model="formData.review", placeholder="由系统指定", disabled)
              el-option(v-for="item in emptySelect", :key="item.value", :label="item.name", :value="item.value")
      el-row(:gutter="20")
        el-col(:span="8")
          el-form-item(label="测试层级")
            el-select(v-model="formData.testLevel", :disabled="!isEdit")
              el-option(v-for="item in testLevelSelect", :key="item.value", :label="item.name", :value="item.value")
        el-col(:span="8")
          el-form-item(label="下属模块")
            el-select(v-model="formData.subModule", :disabled="!isEdit")
              el-option-group( v-for="group in moduleSelect", :key="group.name", :label="group.name")
                el-option(v-for="item in group.options", :key="item.value", :label="item.name", :value="item.value")
        el-col(:span="8")
          el-form-item(label="发布人")
            el-select(v-model="formData.publisher", placeholder="由系统指定", disabled)
              el-option(v-for="item in emptySelect", :key="item.value", :label="item.name", :value="item.value")
      el-row(:gutter="20")
        el-col(:span="8")
          el-form-item(label="标签")
            el-select(v-model="formData.tag", placeholder="请选择", :disabled="!isEdit")
              el-option(v-for="item in tagSelect", :key="item.value", :label="item.name", :value="item.value")
        el-col(:span="8")
          el-form-item(label="优先级")
            el-select(v-model="formData.priority", placeholder="请选择", :disabled="!isEdit")
              el-option(v-for="item in prioritySelect", :key="item.value", :label="item.name", :value="item.value")
        el-col(:span="8")
          el-form-item(label="状态")
            el-select(v-model="formData.status", placeholder="由系统默认显示", disabled)
              el-option(v-for="item in emptySelect", :key="item.value", :label="item.name", :value="item.value")
    el-tabs.need-pop-tabs(v-model="activeTab")
      el-tab-pane(v-for="item in tabList", :label="item.name", :name="item.value", :key="item.value")
    .detail(v-show="activeTab == '0'")
      el-row(:gutter="20")
        el-col(:span="16")
          el-input(type="textarea", v-model="formData.desc", :rows="16", placeholder="描述", :disabled="!isEdit")
        el-col(:span="8")
          p 日志+备注
          el-input(type="textarea", v-model="formData.log", :rows="3", placeholder="输入", :disabled="!isEdit")
          ul
            li(v-for="(text, index) in formData.logList", :key="index") {{text}}
    .trace-form-table(v-show="activeTab == '1'")
      .table-title
        span Trace From 列表
        a.right-btn(type="text", @click="addTraceFromLink") 添加链接
      el-table.need-pop-table(:data="formData.traceFromList", border, height="200px")
        el-table-column(show-overflow-tooltip, prop="id", label="ID")
        el-table-column(show-overflow-tooltip, prop="title", label="标题")
        el-table-column(show-overflow-tooltip, prop="subModule", label="所属模块")
        el-table-column(show-overflow-tooltip, prop="status", label="状态")
        el-table-column(label="操作", min-width="40px", fixed="right", v-if="isEdit")
          template(slot-scope="scope")
            i.icon-act.el-icon-delete(@click="delTraceFromLink(scope.$index, scope.row)")
    .trace-to-table(v-show="activeTab == '2'")
      .table-title
        span Trace To 列表
        a.right-btn(type="text", @click="addTraceToLink") 添加链接
      el-table.need-pop-table(:data="formData.traceToList", border, height="200px")
        el-table-column(show-overflow-tooltip, prop="id", label="ID")
        el-table-column(show-overflow-tooltip, prop="title", label="标题")
        el-table-column(show-overflow-tooltip, prop="subModule", label="所属模块")
        el-table-column(show-overflow-tooltip, prop="status", label="状态")
        el-table-column(label="操作", min-width="40px", fixed="right", v-if="isEdit")
          template(slot-scope="scope")
            i.icon-act.el-icon-delete(@click="delTraceToLink(scope.$index, scope.row)")
    .defect-table(v-show="activeTab == '3'")
      .table-title
        span 缺陷列表
        a.right-btn(type="text", @click="addDefectLink") 添加链接
      el-table.need-pop-table(:data="formData.defectList", border, height="200px")
        el-table-column(show-overflow-tooltip, prop="id", label="ID")
        el-table-column(show-overflow-tooltip, prop="title", label="标题")
        el-table-column(show-overflow-tooltip, prop="subModule", label="所属模块")
        el-table-column(show-overflow-tooltip, prop="status", label="状态")
        el-table-column(label="操作", min-width="40px", fixed="right", v-if="isEdit")
          template(slot-scope="scope")
            i.icon-act.el-icon-delete(@click="delDefectLink(scope.$index, scope.row)")
    .test-case-table(v-show="activeTab == '4'")
      .table-title
        span 测试用例
        a.right-btn(type="text", @click="addTestCaseLink") 添加链接
      el-table.need-pop-table(:data="formData.testCaseList", border, height="200px")
        el-table-column(show-overflow-tooltip, prop="id", label="ID")
        el-table-column(show-overflow-tooltip, prop="title", label="标题")
        el-table-column(show-overflow-tooltip, prop="status", label="状态")
        el-table-column(show-overflow-tooltip, prop="result", label="测试结果")
        el-table-column(label="操作", min-width="40px", fixed="right", v-if="isEdit")
          template(slot-scope="scope")
            i.icon-act.el-icon-delete(@click="delTestCaseLink(scope.$index, scope.row)")
    .test-case-table(v-show="activeTab == '5'")
      el-table.need-pop-table(:data="formData.dependList", border, height="200px")
        el-table-column(show-overflow-tooltip, prop="type", label="类型")
        el-table-column(show-overflow-tooltip, prop="id", label="ID")
        el-table-column(show-overflow-tooltip, prop="result", label="测试结果")
        el-table-column(show-overflow-tooltip, prop="title", label="指派人")
        el-table-column(show-overflow-tooltip, prop="status", label="状态")
    .test-case-table(v-show="activeTab == '6'")
      el-upload(
        class="upload-wrap"
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        :file-list="formData.fileList")
        el-button(type="primary") 上传
    .dialog-footer(slot="footer")
      el-button(type="primary", plain, @click="closeDialog") 取消
      el-button(type="primary", @click="saveBill", v-if="isEdit", :disabled="saving") 保存
      el-button(type="primary", @click="submitBill", v-if="isEdit", :disabled="submitting") 提交
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  name: 'proneedpopup',
  components: {
  },
  props: {
    title: String,
    visible: Boolean,
    isEdit: Boolean,
    parentData: Object
  },
  data() {
    return {
      // 新建时初始数据
      formData: this.parentData,
      saving: false,
      submitting: false,
      // 下拉框选项
      emptySelect: [],
      needLevelSelect: [
        { name: 'RS', value: 'RS' },
        { name: 'SFS', value: 'SFS' },
        { name: 'SSFS', value: 'SSFS' },
        { name: 'DS', value: 'DS' }
      ],
      moduleSelect: [{
        name: '系统',
        options: [{
          value: 'Q',
          name: '系统'
        }]
      }, {
        name: '模块A',
        options: [{
          value: 'A1',
          name: '模块A1'
        }, {
          value: 'A2',
          name: '模块A2'
        }]
      }, {
        name: '模块B',
        options: [{
          value: 'B1',
          name: '模块B1'
        }, {
          value: 'B2',
          name: '模块B2'
        }]
      }, {
        name: '模块C',
        options: [{
          value: 'C1',
          name: '模块C1'
        }, {
          value: 'C2',
          name: '模块C2'
        }]
      }],
      testLevelSelect: [
        { name: 'ST', value: 'ST' },
        { name: 'SIT', value: 'SIT' },
        { name: 'SSIT', value: 'SSIT' },
        { name: 'UT', value: 'UT' }
      ],
      tagSelect: [
        { name: 'N/A', value: 'N/A' },
        { name: 'PER', value: 'PER' },
        { name: 'PRA', value: 'PRA' },
        { name: 'INF', value: 'INF' }
      ],
      prioritySelect: [
        { name: '高', value: 'high' },
        { name: '中', value: 'mid' },
        { name: '低', value: 'low' }
      ],
      // tab
      activeTab: '0',
      tabList: [
        { name: '详细信息', value: '0' },
        { name: 'traced from', value: '1' },
        { name: 'traced to', value: '2' },
        { name: '缺陷', value: '3' },
        { name: '测试用例', value: '4' },
        { name: '所有关联', value: '5' },
        { name: '附件', value: '6' }
      ]
    };
  },
  computed: {
    ...mapGetters({})
  },
  watch: {
    parentData(newData, oldData) {
      if (newData !== oldData) {
        this.formData = newData;
      }
    }
  },
  created() {
  },
  methods: {
    // 关闭、取消
    closeDialog() {
      this.$emit('close');
    },
    // 保存
    saveBill() {
      if (this.saving) {
        return false;
      }
      this.saving = true;
      // const params = { ...this.formData };
      setTimeout(() => {
        if (Math.random() > 0.5) {
          this.$emit('submit', {});
          this.closeDialog();
          this.$message({ message: '保存成功', type: 'success' });
          this.saving = false;
        } else {
          this.$message.error('保存失败');
          this.saving = false;
        }
      }, 500);
    },
    // 提交
    submitBill() {
      if (this.submitting) {
        return false;
      }
      this.submitting = true;
      // const params = { ...this.formData };
      setTimeout(() => {
        if (Math.random() > 0.5) {
          this.$emit('submit', {});
          this.closeDialog();
          this.$message({ message: '提交成功', type: 'success' });
          this.submitting = false;
        } else {
          this.$message.error('提交失败');
          this.submitting = false;
        }
      }, 500);
    },
    // 添加trace from
    addTraceFromLink() {
      this.formData.traceFromList.push({ id: '111111', title: '采集控制', subModule: '采集子系统', status: '已发布' });
    },
    // 删除trace from
    delTraceFromLink(index) {
      this.formData.traceFromList.splice(index, 1);
    },
    // 添加trace to
    addTraceToLink() {
      this.formData.traceToList.push({ id: '111111', title: '采集控制', subModule: '采集子系统', status: '已发布' });
    },
    // 删除trace to
    delTraceToLink(index) {
      this.formData.traceToList.splice(index, 1);
    },
    // 添加defect
    addDefectLink() {
      this.formData.defectList.push({ id: '111111', title: '采集控制', subModule: '采集子系统', status: '已发布' });
    },
    // 删除defect
    delDefectLink(index) {
      this.formData.defectList.splice(index, 1);
    },
    addTestCaseLink() {
      this.formData.testCaseList.push({ id: '123678', title: '采集流程控制', result: '通过', status: '已发布' });
    },
    delTestCaseLink(index) {
      this.formData.testCaseList.splice(index, 1);
    },
    // 附件上传
    deleteRefer(row, index) {
      console.log(row, index);
    },
    // 删除
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    // 预览
    handlePreview(file) {
      console.log(file);
    },
    // 删除之前
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`);
    }
  }
};
</script>

<style lang="sass">
$SEARCHHEIGHT: 104px
$SELECTWIDTH: 100px
.cp-product-need-popup
  .el-table
    th, td
      text-align: center
  .need-pop
    &::-webkit-scrollbar
      display: none
    .el-dialog
      margin-top: 5vh!important
    .el-dialog__footer
      text-align: center
      padding-top: 0
      .el-button
        width: 80px
  .need-pop-form
    .el-form-item
      width: 100%
      height: 34px
      margin-right: 0
    .el-form-item__label
      text-align: left
    .el-form-item__content
      min-width: 120px
      width: calc(100% - 64px)
    .el-select, .el-date-editor.el-input
      width: 100%
  .need-pop-tabs
    height: 52px
    .el-tabs__header
      background-color: #fff
      margin-bottom: 10px
    .el-tabs__item:focus.is-active.is-focus:not(:active)
      box-shadow: none
    .el-tabs__nav-wrap::after
      background-color: #fff
  .table-title
    margin: 0 0 10px 0
    .right-btn
      padding-left: 16px
      color: #5D9BFB
  .need-pop-table
    .icon-act
      font-size: 16px
      font-weight: 500
      padding: 4px
      cursor: pointer
      &:hover
        color: #5D9BFB
</style>
